<%@page import="java.util.Map.Entry"%>
<%@page import="java.util.Set"%>
<%@page import="com.payment.taobaoNavigator.entity.ProductEntity"%>
<%@page import="java.util.Map"%>
<%@page import="com.payment.taobaoNavigator.entity.CatagoryEntity"%>
<%@page import="java.util.List"%>
<%@page import="com.payment.taobaoNavigator.util.NavigatorCache"%>
<jsp:include page="/WEB-INF/include/header.jsp"></jsp:include>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script style="text/javascript">
$(function(){
	$(".catalog").each(function(){
		$(this).hover(function(){
			$(this).find(".detail").css("display","block");
			$(this).addClass("catalog_current");
		},function(){
			$(this).find(".detail").css("display","none");
			$(this).removeClass("catalog_current");
		});
	});
});
var titles= [1,2,3]
$(function(){
	$("#hotTitle ul li").each(function(){
		$(this).hover(function(item){
			var id = $(this).attr("id");
			var dom = $(this);
			removeClass();
			addBottom();
			$(this).css("border-bottom","none");
			$.each(titles, function(i,item){
				if(item==id){
					dom.find("div").addClass("hotCurrent");
				}
			});	
		},function(item){
			addBottom();
			var id = $(this).attr("id");
			var dom = $(this);
			$(this).css("border-bottom","none");		
		});
	});
	$("#1").css("border-bottom","none");
});

function removeClass(){
	$("#hotTitle ul li").each(function(){
		$(this).find("div").removeClass("hotCurrent");
	});
}
function addBottom(){
	$("#hotTitle ul li").each(function(){
		$(this).css("border-bottom","#acd1eb 1px solid");	
	});
}
function showList(id){
	window.location.href="${contextPath}/getList.do?id="+id;
}
</script>
<script type="text/javascript">
		var theInt = null;
		var $crosslink, $navthumb;
		var curclicked = 0;
		
		theInterval = function(cur){
			clearInterval(theInt);
			
			if( typeof cur != 'undefined' )
				curclicked = cur;
			
			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$(".stripNav ul li a").eq(curclicked).trigger('click');
				curclicked++;
				if( 6 == curclicked )
					curclicked = 0;
				
			}, 5000);
		};
		
		$(function(){
			
			$("#main-photo-slider").codaSlider();
			
			$navthumb = $(".nav-thumb");
			$crosslink = $(".cross-link");
			
			$navthumb
			.click(function() {
				var $this = $(this);
				theInterval($this.parent().attr('href').slice(1) - 1);
				return false;
			});
			
			theInterval();
		});
	</script>
</head>
<body>
<%List<CatagoryEntity> catagoryEntitys = NavigatorCache.getByParentId(1); %>
<div id="body">
	<jsp:include page="/WEB-INF/include/topBar.jsp"></jsp:include>
	<div id="content">
		<div id="leftBar">
			<div class="catalog">
				<span class="catalog_title"><a href="#">少儿读物<a></span><br>
				<span>
					<a href="#">幼儿教育</a> 
					<a href="#">小学一年级</a>
					>>
				</span>
				<div class="detail">
					<div>
						<a href="#">小学一年级</a>
						<a href="#">小学一年级</a>
						<a href="#">小学一年级</a>
						<a href="#">小学一年级</a>
						<a href="#">小学一年级</a>
					</div>
				</div>
			</div>
			<div class="catalog">
				<span class="catalog_title"><a href="#">少儿读物<a></span><br>
				<span>
					<a href="#">幼儿教育</a> 
					<a href="#">小学一年级</a>
					>>
				</span>
				<div class="detail">这里是详细信息</div>
			</div>
			<div class="catalog">
				<span class="catalog_title"><a href="#">特卖专区<a></span><br>
				<span>
					<a href="#">幼儿教育</a> 
					<a href="#">小学一年级</a>
					>>
				</span>
				<div class="detail">这里是详细信息</div>
			</div>
			<!-- 这里开始是展示侧栏的导航 -->
			<%
				for(CatagoryEntity entity : catagoryEntitys){
					%>
			<div class="catalog">
				<span class="catalog_title"><a href="#"><%=entity.getName() %><a></span><br>
				<span>
					<%
						List<CatagoryEntity> children = NavigatorCache.getByParentId(entity.getId());
						if(children.size() >= 2){
							for(int i = 0 ; i < 2 ; i++){
								%>
								<a href="#"><%=children.get(i).getName() %></a> 
								<%
							}
						}else{
							for(int i = 0 ; i < children.size() ; i++){
								%>
								<a href="#"><%=children.get(i).getName() %></a> 
								<%
							}
						}
					%>
				</span>
				<div class="detail">
					<div>
					<%
					for(int i = 2 ; i < children.size() ; i++){
						%>
						<a href="#"><%=children.get(i).getName() %></a> 						
						<%
						if((i+4)%5==0){
							out.print("<br><br>");
						}
					}
					%>
					</div>
				</div>
			</div>
					<%
				}
			%>
			
		</div>
	</div>
	<div id="listContainer">
		<div id="listPov">
			热卖商品
		</div>
			<div id="category">
				<span class="category_title">『少儿读物』</span>
				<span class="category_title_detail">热搜关键词：排球、教案、谐音笑话、歇后语、大全运动会、加油稿、六年级上册语文第四单元</span>
				<div id="category_detail">
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>	
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>	
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>	
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>
					<div style="background:inherit">
						本处罗列出了少儿读物中的一些细节
					</div>
				</div>
			</div>
			<div id="category">
				<span class="category_title">『少儿读物』</span>
				<span class="category_title_detail">热搜关键词：排球、教案、谐音笑话、歇后语、大全运动会、加油稿、六年级上册语文第四单元</span>
				<div id="category_detail">
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>	
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>	
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>
					<div>
						<img src="static/images/76094b36843076a9a2cc2b77.jpg"/><br>
						<span ><a href="#" style="display:block;color:black;padding-top:3px;">小学教材</a></span>
					</div>
					<div style="background:inherit">
						本处罗列出了少儿读物中的一些细节
					</div>
				</div>
			</div>
			
			
	</div>
	<div id="foot">
		Copyright : Grom@gmail.com
	</div>
</div>
</body>
</html>